<?php
/**
 * Created by PhpStorm.
 * User: shwy
 * Date: 2017/5/24
 * Time: 10:22
 * 编辑用户信息页面
 */
?>
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<html lang="en">

<head>
    <?php
    $title = [
        'title' => '角色编辑'
    ];
    $this->load->view('/admin/common/header', $title);
    ?>
</head>


<body data-type="widgets">
<script src="/assets/js/theme.js"></script>
<div class="am-g tpl-g">

    <!--    头部   侧边菜单-->
    <?php $this->load->view('/admin/common/bodyLeft'); ?>
    <script type="text/javascript">
    	$(".js-sidebar-nav>li:nth-child(9)>ul").show(80);
    	$(".js-sidebar-nav>li:nth-child(9)>a>span").addClass("sidebar-nav-sub-ico-rotate");
    	$(".js-sidebar-nav>li:nth-child(9)>ul>li:nth-child(2)>a").addClass("active");
    </script>
    <!-- 内容区域 -->
    <div class="tpl-content-wrapper">
        <div class="row-content am-cf">
            <div class="row">
                <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                    <div class="widget am-cf">
                        <div class="widget-head am-cf">
                            <div class="widget-title  am-cf">角色编辑</div>
                        </div>
                        <div class="widget-body  am-fr">

                            <div class="am-u-sm-12">
                                <form class="am-form">
                                    <fieldset>
<!--                                        <legend>表单标题</legend>-->

                                        <div class="am-form-group am-u-sm-6">
                                            <label for="doc-ipt-email-1 am-u-sm-4">权限组:</label>
                                            <input type="email" class="" id="doc-ipt-email-1" value="<?php echo $list['name'] ?>" readonly>
                                        </div>

																				<table class="am-table am-table-bordered r_table js-table-box">
																				  	<thead>
																				  		<tr>
																				  			<th>主要模块</th>
																				  			<th>模块列表页</th>
																				  			<th>权限设置</th>
																				  		</tr>
																				  	</thead>
																				  	<tbody></tbody>
																				</table>

                                        <input type="hidden" name="id" value="<?php echo $list['id'] ?>">
                                        <p class="btn-box"><input type="submit" class="am-btn am-btn-primary  tpl-btn-bg-color-success " style="width: 160px;" /></p>
                                    </fieldset>
                                </form>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script src="/assets/js/amazeui.min.js"></script>
<script src="/assets/js/amazeui.datatables.min.js"></script>
<script src="/assets/js/dataTables.responsive.min.js"></script>
<script src="/assets/js/app.js"></script>

<script type="text/javascript">
	// 进入页面时, js加载数据
	<?php 
		$arrJson = json_encode($permission);		
	?>
	var arrData = <?php echo $arrJson ?>;	
	console.log(arrData);	

	loadData();
	// 判断第一列是否选中
	$(".js-first").each(function() {
		isCheckedOfFirst($(this));
	});
	
	function loadData() {
		var html = '';
		for (var i = 0; i < arrData.length; i++) {
			var arrSet, oList, htmlAfter = '';
			var j = i + 1;
			var nRowspan = arrData[i].child ? arrData[i].child.length : 1;
			var nChild = 0;
			while (arrData[j] && arrData[j].title == arrData[i].title) {
				nRowspan += arrData[j].child ? arrData[j].child.length : 1;
				oList = arrData[j];
				arrSet = oList.child;					
				htmlAfter += addHtml(arrSet, oList);
				j++;
			}
				
			oList = arrData[i];
			arrSet = oList.child;		
			html += '<tr>';
			html += '	<td rowspan="' + nRowspan + '" class="am-text-middle"><label class="am-checkbox r_checkbox"><input type="checkbox" class="js-first" />' + oList.title + '</label></td>';
			html += addHtml(arrSet, oList);
			
			html += htmlAfter;
			i = j - 1;
		}
		$(".js-table-box tbody").html(html);		
	}
	
	function addHtml(arrSet, oList) {
		var html = '';
		html += '	<td rowspan="' + (arrSet && arrSet.length )+ '" class="am-text-middle"><label class="am-checkbox r_checkbox"><input type="checkbox" value="' + oList.id + '" ' + (oList.isCheck && 'checked')  + ' class="js-second" data-title="' + oList.title + '" />' + oList.name + '</label></td>';
		if (arrSet) {
			html += '	<td><label class="am-checkbox r_checkbox"><input type="checkbox" value="' + arrSet[0].id + '" ' + (arrSet[0].isCheck && 'checked') + ' class="js-third" data-pid="' + arrSet[0].pid + '" />' + arrSet[0].name + '</label></td>';
			html += '</tr>';				
			for (var j = 1; j < arrSet.length; j++) {
				html += '<tr>';
				html += '	<td><label class="am-checkbox r_checkbox"><input type="checkbox" value="' + arrSet[j].id + '" ' + (arrSet[j].isCheck && 'checked') + ' class="js-third" data-pid="' + arrSet[j].pid + '" />' + arrSet[j].name + '</label></td>';	
				html += '</tr>';		
			}				
		} else {
			html += '<td></td>';
			html += '</tr>';
		}
		return html;
	}
	
	function isCheckedOfFirst(oFirst) {
		var str = oFirst.parent().text();
		for (var i = 0; i < arrData.length; i++) {
			if (arrData[i].title == str) {
				oFirst.prop("checked", false);
				if (arrData[i].child) {
					for (var j = 0; j < arrData[i].child.length; j++) {
						var id = arrData[i].child[j].id;
						var isChecked = $("[value=" + id + "]").prop("checked");
						if (!isChecked) {return;}
					}
					oFirst.prop("checked", true);					
				}
			}
		}
	}
	
	
	// 点击事件
	var nTotle = $(".js-table-box>thead>tr>th").length;
	var oTr, oTd, tdGrop, nRowspan, num, isChecked, colIndex;

	$(".js-table-box").on("click", "input:checkbox", function() {
		oTr = $(this).parents("tr");
		oTd = $(this).parents("td");
		nRowspan =	oTd.prop("rowspan");
		num = oTr.find("td").length;
		isChecked = this.checked;
		// 第一级
		$(this).hasClass("js-first") && isCheckedOfDown();
		// 第二级
		if ($(this).hasClass("js-second") && !isChecked) {
			// 没选中时
			isCheckedOfDown();
		}
		// 第三级
		if ($(this).hasClass("js-third")) {
			var pid = $(this).attr("data-pid");
			var oSecond, oFirst;
			// 第二级的选中状态
			oSecond = $("[value=" + pid + "]");
			oSecond.prop("checked", true);
			// 第一级的选中状态
			title = oSecond.attr("data-title");
			$(".js-first").each(function() {
				var str = $(this).parent().text();
				if (str == title) {
					isCheckedOfFirst($(this));
					return false;
				}
			});
		}

	});

	function isCheckedOfDown() {
		var tempTr, tempTd;
		oTd.nextAll().find("input:checkbox").prop("checked", isChecked);
		for (var i = 0; i < nRowspan - 1; i++) {
			tempTr = oTr.nextAll().eq(i);
			tempTd = tempTr.children("td").eq(0);
			tempTd.find("input:checkbox").eq(0).prop("checked", isChecked);
			tempTd.nextAll().find("input:checkbox").prop("checked", isChecked);
		}
	}


	// 提交表单
	$("[type='submit']").click(function(e) {
		e.preventDefault();

		var id = $("[name='id']").val();
		var arrPermission = [];
		$("[type='checkbox']:checked").each(function() {
			if (this.value - 0 > 0) {
				arrPermission.push(this.value);
			}
		});

		$.ajax({
			type:"post",
			url:"/admin/role/permission",
			async:true,
			data:{
				id: id,
				permission: arrPermission.join(",")
			},
			dataType: "json",
			success: function(data) {
				window.location.href = "/admin/role/index?page=1";
			}
		});
	});
</script>

</body>

</html>